<template>
	<view class="mengban">
		<view class="top">
		</view>
		<view class="center">
		</view>
		<view class="bottom">
			<image src="/static/newMy/index1.png" mode=""></image>
			<view class="tips"> 以上有 <view class="you">优 </view> 图标是 收藏您雇主发布任务，您可以优先 </view>
			<view class="btn"
				:style="{'background-color':isClick?'#FCC92D':'#D8D8D8','color':isClick?'#262626':'#787878'}">
				<text v-if="isClick" @click="close()">知道了</text>
				<text v-else>知道了({{number}}s)</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "coverTip",
		data() {
			return {
				number: 3,
				isClick: false
			};
		},
		methods: {
			close() {
				this.$emit('closeMengban')
			}
		},
		mounted() {
			let time = setInterval(() => {
				this.number--
				if (this.number == 0) {
					clearInterval(time)
					this.isClick = true
				}
			}, 1000)
		}
	}
</script>
<style lang="less" scoped>
	.mengban {
		position: fixed;
		top: 0rpx;
		bottom: 0rpx;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		pointer-events: auto;
		z-index: 9999999;

		.top {
			width: 100vw;
			height: 366rpx;
			background: rgba(0, 0, 0, 0.60);
		}

		.center {
			width: 100vw;
			height: 221rpx;
		}

		.bottom {
			width: 100vw;
			height: 1000rpx;
			background: rgba(0, 0, 0, 0.60);
			padding: 20rpx 30rpx 0 30rpx;
			box-sizing: border-box;

			image {
				width: 44rpx;
				height: 62rpx;
			}

			.tips {
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 20rpx;
				line-height: 50rpx;

				.you {
					display: inline-block;
					width: 44rpx;
					height: 44rpx;
					margin: 0 20rpx;
					background: linear-gradient(#FFCE09, #F99500);
					border-radius: 6rpx;
					text-align: center;
					line-height: 44rpx;
					color: #fff;
					font-size: 24rpx;
					font-weight: bold;
				}
			}

			.btn {
				width: 510rpx;
				height: 88rpx;
				border-radius: 12rpx;
				text-align: center;
				line-height: 88rpx;
				margin: 220rpx auto auto auto;
				font-size: 28rpx;
				font-weight: bold;
				transition: all 0.3s;
			}
		}
	}
</style>
